<template>
  <h3>考试分类</h3>
  <!-- 表单 -->
  <div class="category-form">
    <div class="opt">
      <!-- 上传文件组件 -->
      <el-upload
        class="avatar-uploader"
        drag
        action="#"
        :on-change="chooseImageFn"
        :auto-upload="false"
        :show-file-list="false"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>
      <div
        v-if="imageUrl"
        style="width: 178px; text-align: center; margin-top: 5px"
      >
        <el-button @click="photoDeleteFn(imageUrl)" type="danger" plain
          >删除图片</el-button
        >
      </div>
    </div>

    <div class="opt">
      <el-input
        v-model="input"
        style="width: 360px; height: 44px; font-size: 16px"
        placeholder="考试分类名称"
      />
    </div>

    <div class="opt">
      <el-button @click="addCategoryFn" type="primary" size="large"
        >添加考试分类</el-button
      >
    </div>
  </div>
  <el-divider content-position="left">分类列表</el-divider>

  <!-- 表格 -->
  <div class="category-table">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="index" label="序号" width="90" />
      <el-table-column prop="text" label="分类名称" width="180" />
      <el-table-column label="图标" width="180">
        <template #default="scope">
          <!-- scope.row.name -->
          <img
            style="width: 60px"
            v-if="scope.row.icon"
            :src="scope.row.icon"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  photoUpload,
  photoDelete,
  categoryAdd,
  categoryList,
  categoryRemove,
} from '../../api/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import api from '../../api/index'
const input = ref('')
const imageUrl = ref('')
const pic = ref('')
// 选择图标
const chooseImageFn = async (file: any) => {
  if (file) {
    // 创建表单实例
    let fd = new FormData()
    fd.append('photo', file.raw)
    // 调用上传图片的方法
    await photoUpload(fd).then(content => {
      // console.log(content)
      let { code, picUrl } = content
      if (code == 200) {
        imageUrl.value = api.url + picUrl
        pic.value = picUrl
      } else {
        ElMessage.error(content.msg)
      }
    })
  }
}
// 删除图片
const photoDeleteFn = async (picUrl: string) => {
  await photoDelete({ picUrl }).then(content => {
    let { code } = content
    if (code == 200) {
      imageUrl.value = ''
    }
  })
}
// 添加考试分类
const addCategoryFn = async () => {
  let text = input.value
  let icon = pic.value
  if (text == '' || icon == '') {
    ElMessage.error('缺少参数，请检查再提交')
    return false
  }
  await categoryAdd({ text, icon }).then(content => {
    let { code, msg } = content
    if (code == 200) {
      ElMessage.success(msg)
      // 重置表单
      input.value = ''
      imageUrl.value = ''
      pic.value = ''
      getCategoryListFn()
    } else {
      ElMessage.error(msg)
    }
  })
}
// 表格数据
const tableData = ref<any>([])
const handleDelete = (index: number, row: any) => {
  let { id, icon, text } = row
  ElMessageBox.confirm(`是否删除这个“${text}”考试分类?`, 'Confirm', {
    distinguishCancelAndClose: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
    .then(async () => {
      await categoryRemove({ id }).then(content => {
        let { code, msg } = content
        if (code != 200) {
          ElMessage.error(msg)
        }
      })
      await photoDelete({ picUrl: icon }).then(content => {
        // console.log(content);
        let { code, msg } = content
        if (code != 200) {
          ElMessage.error(msg)
        }
      })
      tableData.value.splice(index, 1)
    })
    .catch((action: Action) => {

    })
}
// 定义每一项数据的属性类型
type Item = {
  id: string
  text: string
  icon: string
  index?: string | number
}
// 获取考试分类列表
const getCategoryListFn = async () => {
  await categoryList().then(content => {
    // console.log(content)
    let { code, result } = content
    if (code == 200) {
      // 整合后台数据
      let arr = result.map((item: Item, index: number) => {
        item.index = index + 1
        item.icon = api.url + item.icon
        return item
      })
      tableData.value = arr
    }
  })
}
getCategoryListFn()
</script>

<style lang="scss">
.category-form {
  .opt {
    margin-top: 15px;
  }
}

.avatar-uploader-icon,
.el-upload-dragger,
.avatar-uploader,
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  padding: 0 !important;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  padding: 0 !important;
  line-height: 178px;
}
</style>
